<p class="h5" [translate]="'CREATE.CREATE_NEW'"></p>
<label
  class="control-label"
  for="id"
  [innerHTML]="'CREATE.CREATE_A_NEW' | translate: { ENTITY_TABLE: entityTable, ENTITY_ID_FIELD: entityIdField }"
>
</label>
<div class="row">
  <div class="form-inline">
    <div class="form-group col-12">
      <input type="number" class="form-control form-control-sm" id="id" [(ngModel)]="idModel" (input)="checkId()" />
      <button
        class="btn btn-success btn-sm ms-2"
        id="select-button"
        [disabled]="!isIdFree || !idModel"
        (click)="handlerService.select(true, idModel)"
      >
        <i class="fa fa-plus"></i> {{ 'SELECT' | translate }}
      </button>
    </div>
  </div>
  <div class="col-12 mt-1" [hidden]="!idModel" id="id-free-status">
    <small>
      <i class="fas" [class.fa-check-circle]="isIdFree" [class.fa-times-circle]="!isIdFree"></i>
      {{ 'CREATE.FREE_ENTRY' | translate: { ENTITY_ID_FIELD: entityIdField } }}
      {{ isIdFree ? ('CREATE.FREE' | translate) : ('CREATE.ALREADY_USE' | translate) }}
    </small>
  </div>
</div>
